<template>
  <div class="repair-request-container">
    <div class="app-container">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <el-page-header
            @back="goBack"
            :content="isAdd ? '提交维修记录' : '修改维修记录'"
          >
          </el-page-header>
        </div>

        <div class="from">
          <div class="img-list">
            <span class="label">完工照片</span>
            <div
              style="display: flex; flex-wrap:wrap;"
              v-if="dataForm.p_name"
            >
              <template v-for="(item, index) in dataForm.p_name">
                <span
                  v-if="item"
                  class="img-item"
                  :key="item"
                  @mouseenter="mouseenterFn(index)"
                  @mouseleave="mouseleaveFn(index)"
                >
                  <el-image
                    v-if="item"
                    :src="imgUrl + item"
                    fit="scale-down"
                    style="width: 148px; height: 148px"
                    @click="bigImg = imgUrl + item"
                  >
                  </el-image>
                  <div
                    class="mask"
                    style="display: none;"
                  >
                    <i
                      class="el-icon-delete"
                      @click="deleteImg(index)"
                    ></i>
                  </div>
                </span>
              </template>
              <upload-img-list
                class="imgList"
                ref="upload"
              />
            </div>
            <upload-img-list
              v-else
              class="imgList"
              ref="upload"
            />
          </div>

          <div class="form">
            <el-form
              :model="dataForm"
              :rules="dataRules"
              ref="dataForm"
              label-width="40px"
            >
              <el-form-item
                label="备注"
                prop="remark"
              >
                <el-input
                  maxlength="200"
                  show-word-limit
                  placeholder="请输入备注"
                  v-model.trim="dataForm.remark"
                  clearable
                  @keyup.enter.native="RepairRequestFn()"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </div>

          <div class="btn">
            <el-button
              type="primary"
              @click="RepairRequestFn()"
            >{{
              isAdd ? '提交维修记录' : '修改维修记录'
            }}</el-button>
          </div>
        </div>
      </el-card>

      <el-dialog
        v-if="!isAdd && bigImg"
        :show-close="false"
      >
        <img
          width="100%"
          :src="bigImg"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { addRecordInfoAPI, getRecordInfoAPI, updateRecordInfoAPI } from '@/api'
import { goBack, imgUrl, urlArr } from '@/utils'

export default {
  name: 'repairRequest',
  data () {
    return {
      isAdd: this.$route.path.indexOf('add') === 8,
      dataForm: {
        id: '',
        repair_request_id: this.id,
        remark: ''
      },
      dataRules: {
        remark: [
          {
            max: 200,
            type: 'string',
            message: '备注要求不超过200个字符',
            trigger: 'blur'
          }
        ],
        p_name: [
          {
            pattern: /(.*)\\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga),+/,
            message: '图片格式有误',
            trigger: 'change'
          }
        ]
      },
      imgUrl,
      bigImg: '',
      id: this.$route.params.id
    }
  },
  created () {
    this.isAdd || this.getRepairInfoFn()
  },
  methods: {
    // 获取维修记录信息
    async getRepairInfoFn () {
      try {
        const { success, code, data } = await getRecordInfoAPI(this.id)
        if (success && code === 10000) {
          this.dataForm = urlArr(data)
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 提交 | 修改维修记录 -> 点击事件 -> 发送请求
    async RepairRequestFn () {
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          try {
            const pName = await this.$refs.upload.submitUpload()
            if (this.dataForm.p_name) this.$set(this.dataForm, 'p_name', [...this.dataForm?.p_name, ...pName.split(',')])
            else this.$set(this.dataForm, 'p_name', pName.split(','))
            this.dataForm = urlArr(this.dataForm)
            const { success, code } = this.isAdd
              ? await addRecordInfoAPI({
                ...this.dataForm,
                id: this.id,
                p_name: pName
              })
              : await updateRecordInfoAPI({
                ...this.dataForm,
                id: this.id,
                p_name: this.dataForm.p_name.join(',')
              })

            if (success && code === 10000 && this.isAdd) success && this.goBack()
          } catch (err) {
            return this.$message.error(err)
          }
        }
      })
    },
    mouseenterFn (index) {
      document.querySelectorAll('.img-item')[index].querySelector('.mask').style.display = 'block'
    },
    mouseleaveFn (index) {
      document.querySelectorAll('.img-item')[index].querySelector('.mask').style.display = 'none'
    },
    goBack,
    // 删除图片
    deleteImg (index) {
      this.$set(this.dataForm.p_name, 'p_name', this.dataForm.p_name.splice(index, 1))
    }
  }
}
</script>

<style lang="less" scoped>
.btn {
  margin-top: 20px;
  text-align: center;
}
.imgList {
  margin-left: 20px;
}
.box-card > div {
  padding: 30px;
}
.from {
  margin: 0 auto;
  max-width: 860px;
  min-width: 380px;
}
.img-list {
  display: flex;
}
.img-item {
  position: relative;
  top: 0;
  border-radius: 6px;
  overflow: hidden;
  font-size: 20px;
  width: 148px;
  height: 148px;
  transition: opacity 0.3s;
  margin-left: 20px;
}
.mask {
  position: absolute;
  top: 0;
  text-align: center;
  line-height: 148px;
  width: 148px;
  height: 148px;
  background-color: rgba(0, 0, 0, 0.5);
}
.mask i {
  color: #fff;
}
.form {
  margin-top: 20px;
}
.label {
  line-height: 148px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  min-width: 60px;
}
</style>
